<template>
  <section>
    <h4 class="divider">请求参数</h4>
    <div class="request-table">
      <h5>Request Headers</h5>
      <RequestTable
        :tableData="formInline.inParams.header"
        mode="headers"
        @callRequest="
          (value) => {
            formInline.inParams.header = value;
          }
        "
      />
    </div>
    <div class="request-table">
      <h5>Query Params</h5>
      <RequestTable
        :tableData="formInline.inParams.queryParam"
        @callRequest="
          (value) => {
            formInline.inParams.queryParam = value;
          }
        "
      />
    </div>
    <div class="request-table">
      <h5>Request Body</h5>
      <RequestTable
        :tableData="formInline.inParams.body"
        v-if="formInline.inParamsFormat == 'FORMDATA'"
        @callRequest="
          (value) => {
            formInline.inParams.body = value;
          }
        "
      />
      <el-input
        v-else
        v-model="formInline.inParams.body"
        :rows="3"
        type="textarea"
        placeholder="请输入json格式"
        class="text-area"
      />
    </div>
    
  </section>
</template>

<script>
import { ref, onMounted, defineComponent, computed } from "vue";
import { useRoute } from "vue-router";
import RequestTable from "./RequestTable.vue";

export default defineComponent({
  props: {
    modelValue:{
      type: Object,
      default: () => {}
    }
  },
  components: { RequestTable },
  setup(props) {
    const route = useRoute();
    const formInline = computed({
      get:() => props.modelValue,
      set: (val) => emit("update:modelValue", val)
    })
    return {
      formInline,
    };
  },
});
</script>

<style lang="scss" scoped>
.text-area {
  margin: 10px 0;
}
</style>
